<script setup lang='ts'>
import { ref, reactive, toRaw, toRefs } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ArrowLeft, CaretBottom } from "@element-plus/icons-vue";
import type { FormInstance, FormRules } from "element-plus";
import { onMounted } from "vue";
// const router = useRouter()
import pageStyle1 from "../../components/pageStyle1.vue";
import router from "../../router";
import { adverHook } from "../../hooks/adverHooks";

const pageTitle = ref<string>("标题");
let route = useRoute();
const _adverHook = adverHook();

let updateId = route.query.id;
let type = route.query.type;

onMounted(() => {
  if (type == "1" && updateId) {
    _adverHook.getById(updateId, function (data: any) {
      ruleForm.value = data;
    });
  }
  type == "1" ? (pageTitle.value = "广告修改") : (pageTitle.value = "广告添加");
});

const pageReturn = () => {
  router.go(-1);
};

// 表单相关
const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();

interface adverUpdate {
  id?: string;
  advertisingName?: string;
  position?: string;
  image?: string;
  createTime?: string | Date;
  dueTime?: string | Date;
  status?: number;
}

const ruleForm = ref<object>({
  advertisingName: "",
  position: "",
  image: "",
  createTime: "",
  dueTime: "",
  status: 0,
});

// 表单验证规则
const rules = reactive<FormRules>({
  advertisingName: [
    { required: true, message: "输入不能为空！", trigger: "blur" },
  ],
  position: [{ required: true, message: "输入不能为空！", trigger: "blur" }],
  image: [{ required: true, message: "输入不能为空！", trigger: "blur" }],
  createTime: [{ required: true, message: "输入不能为空！", trigger: "blur" }],
  dueTime: [{ required: true, message: "输入不能为空！", trigger: "blur" }],
  status: [{ required: true, message: "输入不能为空！", trigger: "blur" }],
});

// 修改submitForm()函数
const submitForm = async (formEl: FormInstance | undefined) => {
  // 检查表单是否存在
  if (!formEl) return;
  try {
    // 使用Vue.js Promise风格的表单验证
    await formEl.validate();

    // 处理表单内容并打印到控制台
    let formdata = { ...ruleForm.value } as adverUpdate;

    if (type == "1") {
      formdata.id = String(updateId);
      _adverHook.updateAdver(formdata);
    } else {
      // formdata.id = String(new Date().getTime());
      _adverHook.addAdver(formdata);
    }
    // console.log("submit!", formdata);
  } catch ({ errors, fields }) {
    // 打印错误信息到控制台
    console.log("error submit!", errors, fields);
  }
};

const roleOptions = [
  { value: "0", label: "pc端轮播" },
  { value: "1", label: "App端轮播" },
  { value: "2", label: "分类广告" },
];
</script>
<!-- 模型 -->
<template>
  <div class="">
    <pageStyle1 :title="pageTitle">
      <template #headerRight>
        <el-button class="btnReturn" :icon="ArrowLeft" @click="pageReturn()"
          >返回</el-button
        >
      </template>
      <template #main>
        <div class="adverForm">
          <el-form
            ref="ruleFormRef"
            :model.sync="ruleForm"
            :rules="rules"
            label-width="180px"
            class="demo-ruleForm"
            :size="formSize"
            status-icon
          >
            <el-divider content-position="left"
              ><el-icon><CaretBottom /></el-icon>填写信息</el-divider
            >
            <el-form-item label="广告名称：" prop="advertisingName">
              <el-input v-model="ruleForm.advertisingName" />
            </el-form-item>
            <el-form-item label="广告位置：" prop="position">
              <el-select v-model="ruleForm.position" placeholder="Select">
                <el-option
                  v-for="item in roleOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

            <!-- YYYY-MM-DDThh:mm:ss.SSSX -->
            <el-form-item label="开始时间：" prop="createTime">
              <el-date-picker
                v-model="ruleForm.createTime"
                type="date"
                placeholder="请选择日期"
                format="YYYY-MM-DD hh:mm"
                value-format="YYYY-MM-DD hh:mm:ss"
              />
            </el-form-item>
            <el-form-item label="到期时间：" prop="dueTime">
              <el-date-picker
                v-model="ruleForm.dueTime"
                type="date"
                placeholder="请选择日期"
                format="YYYY-MM-DD hh:mm:ss"
                value-format="YYYY-MM-DD hh:mm:ss"
              />
            </el-form-item>
            <el-form-item label="上线/下线：" prop="status">
              <el-radio-group v-model="ruleForm.status">
                <el-radio :label="0">上线</el-radio>
                <el-radio :label="1">下线</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="广告图片：" prop="image">
              <el-input v-model="ruleForm.image" />
            </el-form-item>
            <el-form-item label="广告链接：" prop="name">
              <el-input v-model="ruleForm.path" />
            </el-form-item>
            <el-form-item label="广告备注：" prop="remark">
              <el-input
                v-model="ruleForm.remark"
                :rows="4"
                type="textarea"
                placeholder="Please input"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                :data-id="0"
                @click="submitForm(ruleFormRef)"
              >
                保存
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </template>
    </pageStyle1>
  </div>
</template>

<style scoped>
.adverForm {
  padding: 40px 20%;
}
</style>